<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { ScheduleApp } from './schedule-render/main';
import Operation from './operation/index.vue';

let app: ScheduleApp | null = null;
const containerWidth = ref(70);

onMounted(() => {
  app = new ScheduleApp();
  app.init();
});

onUnmounted(() => {
  if (app) {
    app.destroy();
  }
});
</script>

<template>
  <div class="flex flex-col h-screen w-full">
    <!-- 主要内容区域 -->
    <div class="flex flex-1">
      <div
        id="zrender-container"
        class="zrender-container border"
        :style="{ width: `${containerWidth}%` }"
      />
      <div class="w-1/3 p-2 border-l">
        <Operation />
      </div>
    </div>
  </div>
</template>

<style scoped>
.zrender-container {
  height: calc(100vh - 80px);
  transition: width 0.3s ease;
}
</style>
